<template>
  <!--  搜索栏 -->
  <div class="app-container">
    <basic-search-form
      ref="vBasicSearchForm"
      style="margin-bottom: 8px"
      :columns="columns"
      inline
      size="small"
      @search="search"
    >
      <!--   性别   -->
      <template #sex="{ formdata }">
        <el-select v-model="formdata.sex" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in sexList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <!--    学历   -->
      <template #education="{ formdata }">
        <el-select v-model="formdata.education" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in educationList"
            :key="item.code"
            :label="item.info"
            :value="item.info"
          />
        </el-select>
      </template>
      <!--   实名认证   -->
      <template #authStatus="{ formdata }">
        <el-select v-model="formdata.authStatus" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in authStatusList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <!--   身份标签   -->
      <template #tag="{ formdata }">
        <el-select v-model="formdata.tag" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in userTagList"
            :key="item.code"
            :label="item.info"
            :value="item.info"
          />
        </el-select>
      </template>
      <!--   船员认证状态   -->
      <template #crewAuthStatus="{ formdata }">
        <el-select
          v-model="formdata.crewAuthStatus"
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in authStatusList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <!--     注册方式-->
      <template #signType="{ formdata }">
        <el-select v-model="formdata.signType" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in createTypeList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <!--     注册方式-->
      <template #status="{ formdata }">
        <el-select v-model="formdata.status" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in commonStatusList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
    </basic-search-form>
    <!-- 表格 -->
    <basic-table
      ref="vBasicTable"
      :api="getPageList"
      :immediate-fetch="false"
      :before-fetch="beforeFetch"
      :table-schema="tableSchema"
      :actions="tableActions"
      :table-prop="tableProp"
      :table-event="tableEvent"
      :row-info="{
        rowKey: 'data',
      }"
    >
      <template #userInfo="{ row }">
        <el-row>
          <el-col :span="8">
            <el-avatar v-if="row.avatar" :src="row.avatar" />
            <el-avatar v-else>{{ row.nickName }}</el-avatar>
          </el-col>
          <el-col :span="16">
            <el-row>
              <el-col>{{ row.nickName }}</el-col>
            </el-row>
            <el-row>
              <el-col>{{ row.mobile }}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
      <template #authStatusStr="{ row }">
        <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
        <el-tag size="mini" v-if="row.authStatus === 0" type="info">
          {{ row.authStatusStr }}
        </el-tag>
        <el-tag size="mini" v-if="row.authStatus === 1" type="success">
          {{ row.authStatusStr }}
        </el-tag>
        <el-tag size="mini" v-if="row.authStatus === 2" type="warning">
          {{ row.authStatusStr }}
        </el-tag>
        <el-tag size="mini" v-if="row.authStatus === 3" type="danger">
          {{ row.authStatusStr }}
        </el-tag>
      </template>
      <template #crewAuthStatusStr="{ row }">
        <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
        <el-tag size="mini" v-if="row.crewAuthStatus === 0" type="info">
          {{ row.crewAuthStatusStr }}
        </el-tag>
        <el-tag size="mini" v-if="row.crewAuthStatus === 1" type="success">
          {{ row.crewAuthStatusStr }}
        </el-tag>
        <el-tag size="mini" v-if="row.crewAuthStatus === 2" type="warning">
          {{ row.crewAuthStatusStr }}
        </el-tag>
        <el-tag size="mini" v-if="row.crewAuthStatus === 3" type="danger">
          {{ row.crewAuthStatusStr }}
        </el-tag>
      </template>
      <template #statusStr="{ row }">
        <el-tag size="mini" v-if="row.status === 0" type="danger">
          {{ row.statusStr }}
        </el-tag>
        <el-tag size="mini" v-if="row.status === 1" type="success">
          {{ row.statusStr }}
        </el-tag>
      </template>
      <!-- 表格上方按钮-->
      <template #tableHead="{ total }">
        <div>用户统计：{{ total }}</div>
        <div style="height: 32px">
          <el-button size="mini" type="primary" @click="batchUpdateStatus(0)">批量禁用</el-button>
          <el-button size="mini" type="primary" @click="batchUpdateStatus(1)">批量恢复</el-button>
        </div>
      </template>
      <template #action="{ row }">
        <el-button size="mini" type="text" @click="handleDetail(row.id)">查看详情</el-button>
        <el-button
          v-if="row.status === 0"
          size="mini"
          type="text"
          style="color: #fec171"
          @click="batchUpdateStatus(1, row)"
        >
          恢复
        </el-button>
        <el-button
          v-if="row.status === 1"
          size="mini"
          type="text"
          style="color: #ff4949"
          @click="batchUpdateStatus(0, row)"
        >
          禁用
        </el-button>
      </template>
    </basic-table>
  </div>
</template>

<script>
import { searchColumns, tableActions, tableSchema } from '@/views/user/list/modal.data';
import dayjs from 'dayjs';
import { download } from '@/utils/request';
import { getPageList, batchUpdateStatus } from '@/api/user/user';
import {
  sexEnum,
  educationEnum,
  authStatusEnum,
  createTypeEnum,
  commonStatusEnum,
  userTagEnum,
} from '@/api/common';

export default {
  data() {
    return {
      columns: searchColumns(this),
      tableSchema: tableSchema,
      tableActions: tableActions(),
      tableProp: {},
      tableEvent: {
        'selection-change': (selection) => {
          this.selectedIds = selection.map((item) => item.id);
        },
      },
      queryParams: {},
      sexList: [],
      educationList: [],
      authStatusList: [],
      createTypeList: [],
      commonStatusList: [],
      userTagList: [],
      selectedIds: [],
    };
  },
  mounted() {
    this.getSexEnum();
    this.getEducationEnum();
    this.getAuthStatusEnum();
    this.getCreateTypeEnum();
    this.getCommonStatusEnum();
    this.getUserTagEnum();
    this.$refs.vBasicSearchForm.search();
  },
  methods: {
    getPageList,
    search(form) {
      this.queryParams = { ...form };
      this.$refs.vBasicTable.fetch();
    },
    beforeFetch() {
      let query = {
        ...this.queryParams,
        createBeginTime:
          (this.queryParams.date?.[0] && dayjs(this.queryParams.date[0]).format('YYYY-MM-DD')) ||
          null,
        createEndTime:
          (this.queryParams.date?.[0] && dayjs(this.queryParams.date[1]).format('YYYY-MM-DD')) ||
          null,
      };
      delete query.date;
      return query;
    },
    /**
     * 详情
     * @param id
     */
    handleDetail(id) {
      this.$router.push({ name: 'UserDetail', query: { id: id } });
    },
    /**
     * 获取性别下拉列表
     */
    getSexEnum() {
      sexEnum().then((res) => {
        this.sexList = res.data;
      });
    },
    /**
     * 获取学历下拉列表
     */
    getEducationEnum() {
      educationEnum().then((res) => {
        this.educationList = res.data;
      });
    },
    /**
     * 获取认证状态下拉列表
     */
    getAuthStatusEnum() {
      authStatusEnum().then((res) => {
        this.authStatusList = res.data;
      });
    },
    /**
     * 获取创建方式下拉列表
     */
    getCreateTypeEnum() {
      createTypeEnum().then((res) => {
        this.createTypeList = res.data;
      });
    },
    /**
     * 获取通用状态下拉列表
     */
    getCommonStatusEnum() {
      commonStatusEnum().then((res) => {
        this.commonStatusList = res.data;
      });
    },
    /**
     * 获取用户标签下拉列表
     */
    getUserTagEnum() {
      userTagEnum().then((res) => {
        this.userTagList = res.data;
      });
    },
    batchUpdateStatus(status, row) {
      if (!row && this.selectedIds.length === 0) {
        this.$message.error('请先选择一个或多个用户');
        return;
      }
      let msg = '';
      if (row) {
        msg = '用户：' + row.nickName + '，确定将用户';
        this.selectedIds = [row.id];
      } else {
        msg = '已选' + this.selectedIds.length + '个用户，确定将用户';
      }
      let title = '';
      let type = '';
      if (status === 0) {
        msg = msg + '禁用？禁用后用户无法正常登录';
        title = '禁用';
      } else if (status === 1) {
        msg = msg + '恢复？恢复后用户可正常登录';
        title = '恢复';
      }
      this.$confirm(msg, title, {
        confirmButtonText: title,
      })
        .then(async () => {
          const data = await batchUpdateStatus({ ids: this.selectedIds, status: status });
          if (data.code === 200) {
            this.$message.success(data.msg);
            this.selectedIds = [];
            this.$refs.vBasicTable.fetch();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(() => {});
    },
    /**
     * 导出
     */
    handleExport() {
      download('/user/export', { ...this.queryParams }, `用户列表_${new Date().getTime()}.xlsx`);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f1f1f1;
}
</style>
